<template>
	<uni-nav-bar
		left-icon="left"
		:title="`我的收藏（${list.length || 0})`"
		height="100rpx"
		fixed
		@clickLeft="goBack"
	/>
	<view class="collection-container">
		<f-scroll-list
			:status="loadMore.status"
			:showIcon="loadMore.showIcon"
			:color="loadMore.color"
			:contentText="loadMore.contentText"
			:useLoadMore="list.length > 0 ? true : false"
		>
			<f-common-singleGoods-card2
				:data="list"
				@updateDataList="updateDataList"
				@getCurrentItem="getCurrentItem"
			/>
		</f-scroll-list>
	</view>
</template>

<script setup>
	import { ref, toRaw, reactive } from 'vue';
	import sheep from '@/sheep';
	import { onReachBottom, onPullDownRefresh, onShow, onLoad } from '@dcloudio/uni-app';
	import _ from 'lodash';
	import collectionApi from './../../sheep/api/collection.js';
	const loadMore = reactive({
		status: '',
		showIcon: true,
		color: '',
		contentText: {},
	});
	const list = ref([]);
	const getCurrentItem = (item) => {
		sheep.$router.go('/pages/index/goodsDetail', { id: item.id });
	};

	const goBack = () => {
		sheep.$router.back();
	};
	const pageIndex = ref(1);
	const total = ref(0);
	//取消收藏成功之后，从列表中移除当前项
	const updateDataList = (item) => {
		list.value = list.value.filter((itemValue) => {
			return itemValue.id !== item.id;
		});
		//如果当前列表已为空，则再次查询
		if (!list.value.length) {
			const timer = setTimeout(() => {
				getDataList();
			}, 3000);
			clearTimeout(timer);
		}
	};
	const getDataList = (val = '0') => {
		let data = {
			name: '',
			special: true,
			publicNewSelection: true,
			styles: [''],
			genders: [''],
			festivals: [''],
			hues: [''],
			hotPicks: 0,
			printable: true,
			pageNumber: pageIndex.value,
			pageSize: 10,
		};
		console.log('data===>>>', data);
		collectionApi.getcollectionList(data).then((res) => {
			if (val !== '1') {
				//下拉时，查询到的数据，不需要合并到列表
				if (res.data.records.length) {
					list.value = _.concat(list.value, res.data.records);
					total.value = res.data.total;
				} else {
					return uni.showToast({
						title: '暂未查询到相关数据',
						icon: 'none',
					});
				}
			} else {
				list.value = res.data.records;
			}
		});
	};
	onLoad(() => {
		getDataList();
	});
	/**
	 * reachBottom 触底事件
	 */
	onReachBottom(() => {
		loadMore.status = 'loading';
		pageIndex.value += 1;
		if (list.value.length !== total.value) {
			loadMore.status = 'more';
			getDataList();
		} else {
			loadMore.status = 'no-more';
		}
	});
	const loading = ref(null);
	onPullDownRefresh(async () => {
		loading.value = true;
		uni.showLoading({
			title: '正在刷新...',
			mask: true,
			fail: () => {
				uni.hideLoading();
			},
		});
		await sheep.$store('app').init();
		setTimeout(function () {
			uni.stopPullDownRefresh();
			loading.value = false;
			uni.hideLoading();
		}, 800);
		pageIndex.value = 1;
		getDataList('1');
	});
</script>

<style scoped lang="scss">
	.collection-container {
		height: 100%;
		margin-top: 16rpx;
		padding: 8rpx 32rpx;
	}
</style>
